<template>
  <div class="page-mobile-setting">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      :title="title"
    ></white-header>
    <div class="setting-content">
      <div
        class="content-item"
        @click="$router.push('/m/edit-detail?info=mobile')"
        v-show="token && Object.keys(user_info).length > 0"
      >
        <div class="item-left">
          <div class="name">手机号</div>
          <div class="desc">认证/修改</div>
        </div>
        <div class="item-right">
          <div style="color: #adafb3;">
            <span v-if="user_info.mobile && user_info.mobile != ''"
              >已认证</span
            >
            <span v-else>未认证</span>
          </div>
          <img src="/img/mobile/right-icon.png" alt="" />
        </div>
      </div>
      <div
        class="content-item"
        @click="$router.push('/m/edit-detail?info=email')"
        v-show="token && Object.keys(user_info).length > 0"
      >
        <div class="item-left">
          <div class="name">邮箱</div>
          <div class="desc">认证/修改</div>
        </div>
        <div class="item-right">
          <div style="color: #adafb3;">
            <span v-if="user_info.email && user_info.email != ''">已认证</span>
            <span v-else>未认证</span>
          </div>
          <img src="/img/mobile/right-icon.png" alt="" />
        </div>
      </div>
      <div
        class="content-item"
        @click="$router.push('/m/edit-detail?info=password')"
        v-show="token && Object.keys(user_info).length > 0"
      >
        <div class="item-left">
          <div class="name">密码</div>
        </div>
        <div class="item-right">
          <div style="color: #adafb3;">
            <span>修改</span>
          </div>
          <img src="/img/mobile/right-icon.png" alt="" />
        </div>
      </div>
      <div
        class="content-item"
        v-show="token && Object.keys(user_info).length > 0"
      >
        <div class="item-left">
          <div class="name">微信</div>
        </div>
        <div class="item-right">
          <div
            v-if="
              user_info.wechatId && user_info.wechatId.replace(/(\s*$)/g, '')
            "
            class="unbind"
            @click="wechatUnbindHandle"
          >
            解绑
          </div>
          <div v-else class="bind" @click="wechatBindHandle">绑定</div>
        </div>
      </div>
      <div class="content-item" @click="$router.push('/m/about')">
        <div class="item-left">
          <div class="name">关于我们</div>
        </div>
        <div class="item-right">
          <img src="/img/mobile/right-icon.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { mapState, mapActions, mapMutations } from "vuex";
import { unbindWechat, wxLogin } from "~/api/account/user.js";
export default {
  props: ["setDisabled", "refreshFun", "setLoading"],
  components: {
    WhiteHeader
  },
  data() {
    return {
      course_list: [],
      title: "设置"
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },

      is_loading(state) {
        return state.is_loading;
      }
    })
  },
  watch: {},
  methods: {
    ...mapMutations(["UPDATE_USERINFO", "SET_IS_LOADING", "SET_USERINFO"]),
    ...mapActions(["initUser"]),
    async wechatUnbindHandle() {
      console.log(this.token + "===" + this.user_info);
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
        return false;
      }
      let result = await unbindWechat({
        id: this.user_info.id,
        unbind: true
      });
      if (result && result.data && result.data.code == 200) {
        this.SET_USERINFO(result.data.data);
        // this.initUser();
        this.$toast(this.$t("locale.mobile.editDetail.t36"));
      } else {
        this.$toast(this.$t("locale.mobile.editDetail.t37"));
      }
    },
    async wechatBindHandle() {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
        return false;
      }
      let result = await wxLogin(2);
      if (result.data.code == 200) {
        // console.log("result:", result);
        // return;
        window.location.href = result.data.msg;
        // window.location.href =
        //   "weixin://dl/businessWebview/link/?appid=wx0d853b378eb4ae4e&url=" +
        //   encodeURI(result.data.msg);
      } else {
        this.$toast(this.$t("locale.mobile.login.t19"));
      }
    }
  },
  activated() {
    if (process.client) {
      this.$nextTick(() => {});
      this.initUser();
    }
    this.setDisabled(false);
    this.refreshFun(() => {
      this.initUser();
      this.setLoading(false);
      this.SET_IS_LOADING(false);
    });
  },
  deactivated() {
    this.setDisabled(true);
    window.removeEventListener("scroll", this.eventListener);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.eventListener);
  },
  created() {
    //开启下拉刷新
    this.setDisabled(false);
    //初始化页面数据
    this.initUser();
    //下拉回调
    this.refreshFun(() => {
      this.initUser();
      this.setLoading(false);
      this.SET_IS_LOADING(false);
    });
    //返回上次页面滚动条的位置
    // this.$nextTick(() => {
    //   document.body.scrollTop = this.scroll_heigth;
    //   document.documentElement.scrollTop = this.scroll_heigth;
    // });
  },
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
      let msg = this.$route.query.msg;
      if(msg){
        this.$toast(msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page-mobile-setting {
  //   min-height: calc(100vh - 1.6rem);
  min-height: 100vh;
  background-color: #eef0f4;
  .setting-content {
    margin-top: 0.2rem;
    width: 100%;
    padding-left: 0.4rem;
    box-sizing: border-box;
    background: #ffffff;
    .content-item {
      width: 100%;
      height: 1.0176rem;
      border-bottom: 0.0096rem solid #ededf1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.3rem;
      font-weight: bold;
      .item-left {
        display: flex;
        align-items: center;
        .name {
          width: 1.4rem;
          color: #313233;
        }
        .desc {
          width: 1.8rem;
          color: #adafb3;
        }
      }
      .item-right {
        display: flex;
        align-items: center;
        .bind {
          height: 0.48rem;
          padding: 0 0.2rem;
          line-height: 0.48rem;
          background: var(--theme-color);
          color: #ffffff;
          border-radius: 0.24rem;
          margin-right: 0.2rem;
        }
        .unbind {
          height: 0.48rem;
          padding: 0 0.2rem;
          line-height: 0.48rem;
          background: #f99797;
          color: #ffffff;
          border-radius: 0.24rem;
          margin-right: 0.2rem;
        }
        img {
          margin: 0 0.1rem;
          width: 0.2304rem;
          height: 0.2304rem;
          display: block;
        }
      }
    }
    .content-item:last-child {
      border-bottom: none;
    }
  }
}
</style>
<style lang="scss">
.page-mobile-setting {
}
</style>
